<template>
  <div style="width:100vw;" class="face-class-box">
    <!-- 返回按钮 -->
    <!-- <mt-header fixed title="面授课程详情">
      <router-link to="/classCenter" slot="left">
        <mt-button class="back-butt" icon="back"></mt-button>
      </router-link>
    </mt-header>-->
    <div class="bscroll" ref="bscroll">
      <div style="padding-bottom:74px;" class="bscroll-container">
        <div
          :style="`background-image:url(${classObject.coursePhoto || require('@/assets/homePicture/detail1.jpg')});`"
          class="picture-box"
        >
          <!-- <img :src="classObject.coursePhoto" alt /> -->
        </div>

        <div class="face-class-body">
          <div class="face-card">
            <div class="card-content flex-row">
              <div class="card-text">
                <p class="tip">{{classObject.title}}</p>
                <p class="details">{{classObject.smallTitle}}</p>
                <p class="user">
                  <span style="color:#4787e4;margin-right:5px;" class="iconfont iconxingming"></span>
                  <span>讲师：{{classObject.username}}</span>
                </p>
                <p class="time">{{classObject.openTime}}</p>
              </div>
              <div class="card-picture-box">
                <div
                :style="`background-image:url(${classObject.photo || require('@/assets/homePicture/detail3.jpg')});`"
                class="card-head-picture">
                  <!-- <img :src="classObject.photo || require('@/assets/homePicture/detail3.jpg')" alt /> -->
                </div>
                <!-- <p class="time">明天9点开课</p> -->
              </div>
            </div>
            <div class="card-footer flex-row">
              <!-- <div>
            <span>icon</span>
            <span>5</span>
          </div>
          <div>
            <span>icon</span>
            <span>下载</span>
              </div>-->
            </div>
          </div>
          <div>
            <div class="class-tips">课程简介</div>
            <div class="class-content-text">
              <p>{{classObject.introduce}}</p>
            </div>
          </div>
          <div style="margin-top:20px;">
            <div class="class-tips">是否公开</div>
            <div class="class-content-text">
              <p>{{classObject.flag == 1 ? '公开' : '不公开'}}</p>
            </div>
          </div>
          <div style="margin-top:20px;">
            <div class="class-tips">课程类别</div>
            <div class="class-content-text">
              <p>{{classObject.courseDept == 1 ? '公司课程' : '部门课程'}}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- <div v-if="classType != 'homeface'" class="face-class-btn" style="background-color:#ffffff;">
      <mt-button @click="appltClass" size="large" type="primary">申请上课</mt-button>
    </div> -->
  </div>
</template>
<script>
import BScroll from "better-scroll";
const easydate = require("../../untils/easydate");
import { setText } from "../../untils/ddnavigate";
import { Indicator, Toast } from "mint-ui";
export default {
  data() {
    return {
      classObject: {},
      classType: ""
    };
  },
  mounted() {
    let { id, type } = this.$route.query;
    let params = {
      id
    };
    this.classType = type;
    this.$get("qryCourseInfoById", params).then(res => {
      if (res.success) {
        for (var key in res.data) {
          if (key == "openTime") {
            res.data[key] = easydate(res.data[key]).format(
              "yyyy年-MM月-dd日 HH:mm:ss"
            );
          }
        }
        this.classObject = res.data;
      }
    });
    this.initScroll("bscroll");
    // 修改标题文字
    setText("面授课程详情");
  },
  methods: {
    initScroll(dom) {
      this.$nextTick(() => {
        let bscrollDom = this.$refs[dom];
        this.aBScroll = new BScroll(bscrollDom, {
          click: true
        });
      });
    },
    appltClass() {
      let { id } = this.$route.query;
      let params = {
        courseId: id
      };
      this.$get("signOneCourse", params).then(res => {
        if (res.success) {
          Toast({
            message: "操作成功",
            iconClass: "mint-toast-icon mintui mintui-success",
            duration: 2000
          });
          debugger;
          setTimeout(() => {
            this.$router.go(-1);
          }, 2000);
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
@import url("~@/pagecss/face-class.less");
.tip,
.details {
  width: 400/75rem;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
</style>